<template>
	<view>
		<u-navbar back-icon-color="#fff" :border-bottom="false" title-color="#fff" :immersive="true" :is-back="true"
			title="厂家申请" :background="background">
		</u-navbar>
		<image class="subscribe" src="/static/user/factory.png" mode="widthFix"></image>
		<view class="content">
			<view class="info-box">
				<view class="inpt-item">
					<view class="inpt-text">
						厂家名称
					</view>
					<u-input v-model="name" placeholder="请输入厂家名称" :clearable="false" />
				</view>
				<view class="inpt-item">
					<view class="inpt-text">
						厂家电话
					</view>
					<u-input v-model="tell" type="number" placeholder="请输入厂家电话" :clearable="false" />
				</view>
				<view class="inpt-item">
					<view class="inpt-text">
						厂家地址
					</view>
					<u-input v-model="address" placeholder="请输入厂家地址" :clearable="false" />
				</view>
				<view class="item">
					<view class="inpt-text">
						厂家介绍
					</view>
					<u-input v-model="introduce" :border="true" type="textarea" height="100" placeholder="请输入厂家介绍" />
				</view>
				<view class="upload-item" v-for="(item,index) in uploadText" :key="index">
					<view class="upload-text">
						{{item.text}}
					</view>
					<view>
						<u-upload :action="action" :file-list="fileList" upload-text=" "></u-upload>
					</view>
				</view>
			</view>
			<view class="btn">
				立即申请
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0.0)',
				},
				name: '',
				tell: '',
				address: '',
				introduce: '',
				action: 'http://www.example.com/upload',
				fileList: [],
				uploadText: [{
						text: '烟花爆竹经营（批发）许可证'
					},
					{
						text: '消防安全检查合格证'
					},
					{
						text: '危险化学品安全管理人员资格证书'
					},
					{
						text: '工商营业执照和税务登记证'
					},
					{
						text: '其他证件和资质'
					},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-title {
		color: #fff;
	}

	.subscribe {
		width: 100%;
		height: 628rpx;
	}

	.content {
		width: 100%;
		padding: 20rpx;
		margin-top: -260rpx;

		.info-box {
			box-shadow: 0rpx 0rpx 16rpx 1rpx rgba(0, 0, 0, 0.08);
			background-color: #fff;
			border-radius: 24rpx;
			padding: 10rpx 30rpx;
			font-size: 28rpx;
			color: #333333;
			position: relative;
			z-index: 99;

			.inpt-item {
				display: flex;
				align-items: center;
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid rgba(204, 204, 204, 0.3);
				margin-top: 10rpx;

				.inpt-text {
					width: 150rpx;
				}
			}
			.item {
				margin-top: 10rpx;
				.inpt-text {
					padding: 10rpx 0;
				}
			}

			.upload-item {
				margin-top: 20rpx;
			}
		}

		.btn {
			margin: 30rpx 0;
			padding: 30rpx;
			background: linear-gradient(180deg, #FE7D0B 0%, #FA3F12 100%);
			color: #fff;
			font-size: 28rpx;
			border-radius: 50rpx;
			text-align: center;
		}
	}
</style>